{{extend './head.html'}}
{{block 'content'}}
<div class="index">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" style="height: 500px;">
            {{each swiper}}
            {{if $index==0}}
            <div class="carousel-item active">
                <img class="d-block w-100" src="{{$value.swiperurl}}">
            </div>
            {{else}}
            <div class="carousel-item">
                <img class="d-block w-100" src="{{$value.swiperurl}}">
            </div>
            {{/if}}
            {{/each}}
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <div class="layui-input-block" style=" display: flex;margin: 0px;margin-top: 10px;">
        <input type="text" name="title" id="sstext" placeholder=" 请输入搜索内容" class="layui-input">
        <button class="layui-btn" id="ssbtmn">立即提交</button>
    </div>
    <div class="shop-content">
        <div class="shopp" id="shopp">
            {{each data}}
            <div class="card" style="width:298px;">
                <a href="info?id={{$value.id}}">
                    <img class="card-img-top" src="{{$value.url}}" alt="Card image cap" style="height:262px;">
                </a>

                <div class="card-body">
                    <div class="shopp-head">
                        <h5 class="card-title" style="font-weight: bold;">{{$value.name}}</h5>
                        <p style="color:#aaa">价格:<span
                                style="color: red;font-size: 16px; font-weight: bold;">{{$value.porice}}</span>￥
                        </p>
                    </div>
                    <p class="card-text" style="font-size: 10px;">{{$value.info}}</p>
                    <div class="btn" style="text-align: center;width: 100%;">
                        <button type="button" class="btn btn-primary btn-lg myModals" data-toggle="modal"
                            data-method="setTop" sid="{{$value.id}}" style="width:150px;outline: none;">购买</button>
                    </div>
                </div>
            </div>
            {{/each}}
        </div>
    </div>
    <div style="background: #eee;width:80px; height:80px;position:fixed;bottom: 10vw;right: 15vw;" id="layerDemos"
        data-method="showsping">
        <img src="/public/img/timg.png" style="width:100%">
    </div>
    
</div>
{{/block}}
{{block 'contentcss'}}
<style>
    .index {
        margin: 0px auto;
        width: 980px;
    }

    .shopp {
        display: flex;
        justify-content: left;
        flex-wrap: wrap;

    }

    .shopp .card {
        margin: 9px 14px;
    }

    .shopp-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    .shopp {
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        margin-top: 20px;
        margin-bottom: 40px;
    }

    .shop-content {
        min-height: 1000px;
    }
</style>
{{/block}}
{{block 'contentjs'}}
<script>
    init();
    function init() {
        function getCookie(name) {
            var arr = document.cookie.split("; ");
            for (var i = 0, len = arr.length; i < len; i++) {
                var item = arr[i].split("=");
                if (item[0] == name) {
                    return item[1];
                }
            }
            return "";
        }
        $(function () {
            $('.carousel').carousel({
                interval: 5000
            })
        })
        //购物车工具包
        //1-----获取数据信息
        function getshopping(name) {
            return JSON.parse(localStorage.getItem(name));
        }

        layui.use('layer', function () {
            var $ = layui.jquery, layer = layui.layer;
            //触发事件
            var active = {
                setTop: function (othis) {
                    //判断是否登录
                    if (getCookie('user_key') == null) {
                        layer.msg('请先登录', { icon: 5 });
                        return;
                    }
                    var val;
                    var that = this;
                    var sid = $(that).attr('sid');
                    $.ajax({
                        type: "get",
                        url: "/api/shoppinfo?id=" + sid,
                        success: function (datas) {
                            if (datas.flog) {
                                val = datas.data[0];
                                var type = othis.data('type'), text = othis.text();
                                layer.open({
                                    type: 1
                                    , offset: type
                                    , id: 'layerDemo' + type
                                    , content: '<div style="padding: 20px 100px;">是否购买确认购买该商品？</div>'
                                    , btn: ['取消', '确定']
                                    , btnAlign: 'c'
                                    , shade: 0
                                    , yes: function () {
                                        layer.closeAll();
                                    },
                                    btn2: function () {
                                        if (getshopping(val.name) == null) {
                                            localStorage.setItem(val.name, JSON.stringify({
                                                id: val.id,
                                                name: val.name,
                                                number: 1
                                            }));
                                        } else {
                                            localStorage.setItem(val.name, JSON.stringify({
                                                id: val.id,
                                                name: val.name,
                                                number: ++getshopping(val.name).number,
                                            }));
                                        }
                                        layer.msg('加入购物车成功', { icon: 6 });
                                    }
                                });
                            } else {
                                layer.msg('程序异常!', { icon: 5, time: 1000 });
                            }
                        },
                        error: function (err) {
                            layer.msg('程序异常!', { icon: 5, time: 1000 });
                        }
                    });

                },
                showsping: function (othis) {
                    var alldata = window.localStorage;
                    delete alldata.easyweb
                    var htmls = '';

                    Object.getOwnPropertyNames(alldata).forEach(function (key) {
                        var val = JSON.parse(alldata[key]);
                        htmls += `<div style="font-size:20px;">${val.name}&nbsp;&nbsp;&nbsp;商品数目:${val.number}</div><br>`;
                    });

                    layer.alert(alldata, {
                        title: '购物车：',
                        content: htmls,
                        area: '500px',
                        btn: ['结算', '确定'],
                        yes: function () {
                            console.log(alldata)
                            if (!alldata.length) {
                                layer.msg('订单为空!', { icon: 5, time: 1000 });
                                localStorage.clear();
                                return;
                            }
                            var data = [];
                            Object.getOwnPropertyNames(alldata).forEach(function (key) {
                                var val = JSON.parse(alldata[key]);
                                data.push(val);
                            });
                            $.ajax({
                                type: "post",
                                url: "/api/addshopcardinfo",
                                data: { data: JSON.stringify(data) },
                                success: function (datas) {
                                    if (datas.flog) {
                                        layer.msg('加入订单成功', { icon: 6 });
                                    } else {
                                        layer.msg('程序异常!', { icon: 5, time: 1000 });
                                    }
                                    localStorage.clear();
                                },
                                error: function (err) {
                                    layer.msg('程序异常!', { icon: 5, time: 1000 });
                                }
                            });
                            layer.msg('购买成功!');
                            localStorage.clear();
                        }
                    });
                }
            }

            $('.myModals').on('click', function () {
                var othis = $(this), method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            }
            );
            $('#layerDemos').on('click', function () {
                var othis = $(this), method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            }
            );
        });
    }
    $('#ssbtmn').on('click', function () {
        var name = $('#sstext').val();
        $.ajax({
            type: "get",
            url: "/api/commoditybyname?name=" + name,
            success: function (datas) {
                if (datas.flog) {
                    var html = ''
                    datas.data.forEach(function (item) {
                        html += ` 
                             <div class="card" style="width:298px;">
                                <img class="card-img-top" src="${item.url}" alt="Card image cap" style="height:262px;">
                                <div class="card-body">
                                    <div class="shopp-head">
                                        <h5 class="card-title" style="font-weight: bold;">${item.name}</h5>
                                        <p style="color:#aaa">价格:<span style="color: red;font-size: 16px; font-weight: bold;">${item.porice}</span>￥</p>
                                    </div>
                                    <p class="card-text" style="font-size: 10px;">${item.info}</p>
                                    <div class="btn" style="text-align: center;width: 100%;">
                                        <button type="button" class="btn btn-primary btn-lg myModals" data-toggle="modal"
                                            data-method="setTop" sid="1" style="width:150px;outline: none;">购买</button>
                                    </div>
                                </div>
                             </div>`
                    })
                    $('#shopp').html(html);
                    init();
                } else {
                    layer.msg('程序异常!', { icon: 5, time: 1000 });
                }
            },
            error: function (err) {
                layer.msg('程序异常!', { icon: 5, time: 1000 });
            }
        });
    })
</script>
{{/block}}